<template>
	<view ref="addInfo" class="detail_pop" v-show="isShowAddInfo" >
		<view  class="pop_title" style="background-color:#dbeff7;"> 添加号码</view>

		<view style="width:100%;overflow-y:scroll;height:80vh;background-color: #f7f7f7;" >
			<u-form
				labelPosition="left"
				:model="detailData"
				ref="infoForm"
				style="background-color:#f7f7f7;height:100%;overflow-y:auto;"
				:labelStyle='taskFormLabel'
				labelWidth="180"
			>
				<view style="width:100%;overflow-y:scroll;height:78vh;" >
					<u-form-item
						label="客户号码:"
						prop=""
						:borderBottom="false"
						class="scroll-view-item"
					>
						<view style="width:92%;">
							<u-input
								v-model="detailData.phone"
								:border="true"
								:custom-style="inputStyle"
								placeholder="一行一个号码"
								type="textarea"
								style="height:15vh"
							></u-input>
						</view>
					</u-form-item>
					
					<u-form-item
						v-for="(domain, index) in en_encrypt"
						:key="domain.key"
						:label="domain.label+':'"
						:prop="domain.key"
						:borderBottom="false"
						class="scroll-view-item"
					>
							
						<view style="width:92%;">
							<u-input v-model="domain.value" autocomplete="off" @change="handleChangeRemark(domain,index)" v-if="domain.ds_type == 'text'" :custom-style="inputStyle" :border="true" placeholder=""></u-input>
							
							<u-input type="textarea" v-model="domain.value" autocomplete="off" @change="handleChangeRemark(domain,index)" v-if="domain.ds_type == 'textarea'" :custom-style="inputStyle" :border="true" placeholder=""></u-input>
							
							<radio-group v-model="domain.value" v-if="domain.ds_type == 'radio'"  @change="handleChangeRemark(domain,index)" >
								<label class="radio" v-for="(dict,index) in domain.ds_remark" :key="index+1" style="margin-right:30rpx;">
									<radio :value="dict" style="transform:scale(0.7)" /> {{dict}} 
								</label>
							</radio-group>
								
							<checkbox-group v-if="domain.ds_type == 'checkbox'"  @change="handleChangeCheckboxRemark($event,domain,index)">
								<label class="checkbox" v-for="(dict,index) in domain.ds_remark" :key="index+1" style="margin-right:30rpx;font-size:30rpx;">
									<checkbox :value="dict" style="transform:scale(0.7)" :checked="domain.value.indexOf(dict) == -1 ? false : true" /> {{dict}}
								</label>
							</checkbox-group>
						
						</view>
					</u-form-item>
							
					<u-form-item
						v-for="(domain, index) in en_encrypt_children"
						:key="domain.key + index"
						:prop="domain.key"
						:borderBottom="false"
						class="scroll-view-item"
					>
						<view class="uni-flex uni-column">
							<view class="flex-item flex-item-V">
								<checkbox v-model="domain.value" :checked="domain.value" @change="(val)=>{handleChangeChildrenRemark('','',index,val)}" style="margin-left:20rpx;"> {{ domain.label }}</checkbox>
							</view>
							<view v-for="(item,i) in domain.children" :key="i" class="flex-item flex-item-V">
								<text style="display:block;width:200rpx;float:left;text-align: right;padding-right:10px;">{{ item.label }}</text>
								<u-input v-model="item.value" autocomplete="off" @change="handleChangeChildrenRemark(item,i,index,true)" v-if="item.ds_type == 'text'" :custom-style="inputStyle" :border="true" style="width:calc(100% - 200rpx);float:left;"></u-input>
								<u-input type="textarea" v-model="item.value" autocomplete="off" @change="handleChangeChildrenRemark(item,i,index,true)" v-if="item.ds_type == 'textarea'" :custom-style="inputStyle" :border="true" style="width:calc(100% - 180rpx);float:left;"></u-input>
								
								<view style="width:calc(100% - 200rpx);float:left;">
									<radio-group v-model="item.value" v-if="item.ds_type == 'radio'" @change="handleChangeChildrenRemark(item,i,index,true)" >
										<label class="radio" v-for="(dict,index) in item.ds_remark" :key="index+1" style="margin-right:30rpx;">
											<radio :value="dict" style="transform:scale(0.7)" /> {{dict}} 
										</label>
									</radio-group>
								</view>
								
								<view style="width:calc(100% - 200rpx);float:left;">
									<checkbox-group v-model="item.value" v-if="item.ds_type == 'checkbox'" @change="handleChangeChildrenCheckboxRemark(item,i,index,true)" >
										<label class="checkbox" v-for="(dict,index) in item.ds_remark" :key="index+1" style="margin-right:30rpx;font-size:30rpx;">
											<checkbox :value="dict" style="transform:scale(0.7)" :checked="item.value.indexOf(dict) == -1 ? false : true" /> {{dict}}
										</label>
									</checkbox-group>
								</view>
							</view>
						</view>
					</u-form-item>
				</view>
				<u-form-item
						label=""
						prop=""
						labewidth="0"
						:borderBottom="false"
						style="position:absolute;bottom:0rpx;width:100%;background-color: #f7f7f7;"
				>
					<view style="float:right;width:92%;margin-right:7%;">
						<u-button @click="handleCloseCurrentPop()" :custom-style="btnFormStyle" type="error" ><uni-icons type="submit" color="#fff" size="22"></uni-icons> 关闭</u-button>
						<u-button @click="handleSaveCallOutData()" :custom-style="btnFormStyle" :loading="isSubmit" :disabled="isSubmit" type="primary" ><uni-icons type="submit" color="#fff" size="22"></uni-icons> 保存</u-button>
					</view>
				</u-form-item>
			</u-form>
		</view>
		
		<u-toast ref="uToastsAddInfo" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	
	import {
		saveAddCallOut,
		getProjectDataBySeatGroup
	} from "@/api/task.js";
	
	// import InfoSelf from "@/pages/index/infoself.vue";
	
	export default {
	    name: 'addInfo',
	    data() {
	      return {
	        taskForm:{
	        	remark:'',
	        	phone_number:'',
	        	username:'',
				called:''
	        },
			
			detailData:{},
			
			taskFormLabel:{
				marginLeft:'30rpx',
				fontSize:'30rpx'
			},
			
			inputStyle:{
				fontSize:'30rpx',
				lineHeight:'50rpx',
				height:'50rpx',
				backgroundColor:'#fff'
			},
			
			btnFormStyle: {
				border: 'none',
				borderRadius: '10rpx',
				color: '#fff',
				height:'70rpx',
				padding:'20rpx 30rpx',
				margin:'0rpx',
				float:'right',
				marginLeft:'15rpx'
			},
			
			isSubmit:false, //是否点击提交按钮
			
			en_encrypt:[],
			en_encrypt_children:[],
	      }
	    },
		props:['isShowAddInfo'],
		computed: {
			...mapGetters(["userInfo"])
		},	
	    methods: {
			//初始化数据
			initData(){
				let params = {
					'seat':this.userInfo.seat
				}
				
				this.en_encrypt = [];
				this.en_encrypt_children = [];
				
				//获取客户信息
				getProjectDataBySeatGroup(params).then(res=>{
				    console.log("getProjectDataBySeatGroup res",res);
				    // taskCallData.value = res.data;
				    let data = res.data.data;
				
				    if(data != null){
						//客户信息，扩展字段
						if(data.project_datas != '' && data.project_datas != null ){				
							//扩展字段
							let p_data = data.project_datas;
							let p_data_children = []; //扩展一级字段 子字段
				
							this.detailData.domains = [];
							this.detailData.domains_children = [];
				
							p_data.forEach((item,index)=>{
								let is_flag = 0; //是否有同字段，0没有，1有
				
								if(item.children.length){
									p_data_children.push(item);
								}else{
									this.detailData.domains.push({
										key: 'remark_' + index,
										label: item.ds_name,
										value: item.ds_type == 'checkbox' ? [] : '',
										parent_id:item.parent_id,
										ds_type:item.ds_type,
										ds_remark:item.ds_remark ? item.ds_remark.split(",") : '',
										children:item.children
									});
				
									this.en_encrypt.push({
										key: 'remark_' + index,
										label: item.ds_name,
										value: item.ds_type == 'checkbox' ? [] : '',
										parent_id:item.parent_id,
										ds_type:item.ds_type,
										ds_remark:item.ds_remark ? item.ds_remark.split(",") : '',
										children:item.children
									});
								}
							});
				
							//分组处理
							if(p_data_children.length){
								p_data_children.forEach((item,index)=>{
									let p_children_data = [];
									let is_check = 0; //判断是否是当前分组数据，比对分组名，0不是，1是
				
									item.children.forEach((p,v)=>{
										if(p.ds_type == 'radio' || p.ds_type == 'checkbox'){
											p.ds_remark = p.ds_remark ? p.ds_remark.split(",") : [];
										}
				
										p_children_data.push({
											key: 'remark_' + v,
											label: p.ds_name,
											value: p.ds_type == 'checkbox' ? [] :'',
											parent_id:p.parent_id,
											ds_type:p.ds_type,
											ds_remark:p.ds_remark
										});
									});
									
									this.detailData.domains_children.push({
										key: 'remark_' + index,
										label: item.ds_name,
										value: is_check,
										parent_id:item.parent_id,
										ds_type:'',
										ds_remark:'',
										children:p_children_data
									});
				
									this.en_encrypt_children.push({
										key: 'remark_' + index,
										label: item.ds_name,
										value: is_check == 1 ? true:false,
										parent_id:item.parent_id,
										ds_type:'',
										ds_remark:'',
										children:p_children_data
									});
								});
							}
				        }
				    }
				});
							
			},
			
			handleCloseCurrentPop(){
				this.taskForm = {
					remark:'',
					phone_number:'',
					username:'',
					called:''
				};
				
				this.$emit('closeInfoPop', '');
			},
			
			//扩展字段修改
			handleChangeRemark(data,index){				
				let current_remark = this.detailData.domains[index]; //当前扩展字段
				console.log("handleChangeRemark current_remark",current_remark);
				if(data.value != current_remark.value){
				    this.detailData.domains[index] = data.value;
				}
			},
			
			//扩展字段 checkbox
			handleChangeCheckboxRemark(e,data,index){				
				let current_remark = this.detailData.domains[index]; //当前扩展字段
				let current_en_remark = this.en_encrypt[index];
				console.log("handleChangeRemark current_remark",current_remark);
				
				current_remark.value = e.target.value;
				current_en_remark.value = e.target.value;
				
				this.detailData.domains[index] = current_remark;
				this.en_encrypt[index] = current_en_remark;
				
			},
			
			//分组扩展checkbox选择事件
			handleChangeChildrenCheckboxRemark(data,index,group_index,val){				
				let current_remark = this.detailData.domains_children[group_index]['children']; //当前扩展字段
				let current_en_remark = this.en_encrypt_children[group_index]['children'];
				console.log("handleChangeRemark current_remark",current_remark);
				
				current_remark.value = val;
				current_en_remark.value = val;
			},
			
			//分组扩展字段修改
			handleChangeChildrenRemark(data,index,group_index,val){			
			    this.detailData.domains_children[group_index]['children'][index].value = val;
			
			    this.en_encrypt_children[group_index]['children'][index].value = val;
			},
			
			
			//保存任务
			handleSaveCallOutData(){
				let params = this.detailData;
				let _this = this;
				
				params.seat = this.userInfo.seat;
				params.pid = this.userInfo.pid;
				params.cid = this.userInfo.companyid;
		
				
				params.domains = JSON.stringify(this.en_encrypt);
				params.domains_children = JSON.stringify(this.en_encrypt_children);
				
				console.log("params",params,this.userInfo);
				
				if(params.phone == '' || params.phone == undefined){
					_this.$refs.uToastsAddInfo.show({
						title: "请输入号码！",
						type: 'error',
						duration: '2000',
					});
				}else{
					this.isSubmit = true;
				
					saveAddCallOut(params).then(res=>{
						console.log("saveAddCallOut res",res);
						
						this.isSubmit = false;
						
						if(res.data.code == 0){
							//追加数据到顶部
							// params.id = res.data.data;
							uni.$emit("appendInfoList",res.data.data);
							
							// InfoSelf.methods.handleAppendInfoList(params);
							
							setTimeout(()=>{
								uni.$emit('closeInfoPop', '');
							},2000)
							
							_this.$refs.uToastsAddInfo.show({
								title: res.data.msg,
								type: 'success',
								duration: '2000',
							});
						}else{						
							_this.$refs.uToastsAddInfo.show({
								title: res.data.msg,
								type: 'error',
								duration: '2000'
							})
						}
					});
				}
			},
	    },
		
		watch: {
		    isShowAddInfo(newVal, oldVal) {
		      // 监听文本框值的改变
		      console.log("addinfo watch newVal",newVal);
			  console.log("addinfo watch oldVal",oldVal);
			  
			  if(newVal){
				  // this.taskForm.phone_number = newVal.called;
				  // this.taskForm.called = newVal.called
				  
				  this.initData();
			  }
		    }
		},
		beforeDestroy(){
			this.taskForm = {
				remark:'',
				phone_number:'',
				username:'',
				called:''
			}
		}
	}
</script>

<style>	
	.detail_pop{
		width:94%;
		margin-left:3%;
		border:#ccc 1px solid;
		background-color:'#f7f7f7';
		box-shadow:10rpx 10rpx 30rpx #ccc;
		border-radius:20rpx;
		position: absolute;
		margin-top:-120rpx;
		height:1300rpx;
		margin-bottom:10%;
		z-index:100000;
		overflow:hidden;
		/* padding-bottom:50rpx; */
	}
	
	
	.pop_title{
		font-size:32rpx;
		width:100%;
		padding-left:2%;
		padding-right:2%;
		height:80rpx;
		font-weight: bold;
		line-height: 80rpx;
		border-bottom:#ccc 1px solid;
	}
	
	.pop_title_item{
		width:auto;
		float:left;
		padding:0 20rpx;
	}
	
	.pop_title .active{
		background-color:#589bff;
		color:#fff;
	}
</style>